import './index.css'
import React, { useState, useEffect } from 'react';
import { Input, Button, DatePicker, Select, Table, Form, Tag, Space, Pagination, Breadcrumb, Modal } from 'antd';
import ModalTable from './components/ModalTable/ModalTable'
import ModalTableHEdit from './components/ModalTableHEdit/ModalTableHEdit'
import ModalTableHTime from './components/ModalTableHTime/ModalTableHTime'
import http from '../../../utils/http';
import Item from 'antd/lib/list/Item';

function HealthData(props) {

    // let userName="";//姓名
    let [userName, setuserName] = useState('')
    let [health_id, stehealth_id] = useState('');
    let [TimeL, setTimeL] = useState(''); //时间
    let [TimeH, setTimeH] = useState(''); //时间

    //时间
    const { RangePicker } = DatePicker;
    
    function onChangeT(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setTimeL(dateString[0])
        setTimeH(dateString[1])
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }

    //name
    function onChangeN(value) {
        console.log(202, value.target.value);
        setuserName(value.target.value)
    }

    //health_id
    function onChangeI(value) {
        stehealth_id(value.target.value)
    }

    //分数（低
    function onChangeSl(value) {
        console.log('低分', value.target.value);
        // onChangeSl(value.target.value)
    }
    //分数（高
    function onChangeSh(value) {
        console.log('高分', value.target.value);
        // onChangeSl(value.target.value)
    }


    // 下拉框
    const { Option } = Select;
    function handleChange(value) {
        console.log(`表现: ${value}`, value == 1 ? '良好' : value == 2 ? '一般' : '差');
    }


    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(10)
    let [total, stetotal] = useState('')
    // 条数
    useEffect(() => {
        http({
            url: '/olderly/count',
            method: 'get',
        }).then((res) => {
            stetotal(res.data[0].count)
        })
    }, [])

    // 分页
    function paging(page, pageSize) {
        console.log(page, pageSize);
        setpage(page)
        http({
            url: '/olderly/health',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            setColumns(res.data)
        })
    }

    const [source , setsource]=useState();
    // table挂载渲染
    const [columnsdata, setColumns] = useState();
    useEffect(() => {
        // console.log(page, pageSize);
        fn()
        fn2()
    }, [page])

    const fn=()=>{
        http({
            url: '/olderly/health',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            console.log(res)
            setColumns(res.data)
        })
    }

    const fn2=()=>{
        http({
            url: '/score/management',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            console.log(res)
            setsource(res.data)
        })
    }

    // columnsdata.forEach(Item => {

    //     source.forEach(subItem => {
    //         if(Item.heartRate){
    //             switch(){

    //             }
    //         }
    //     });
    // });



    // 筛选
    const handleSubmit = (value) => {
        // console.log(value);
        // console.log(userName);
        http({
            url: '/search/health',
            method: 'get',
            data: {
                userName: userName,
                health_id: health_id,
                page: page,
                pageSize: pageSize,
                TimeL: TimeL,
                TimeH: TimeH
            },
        }).then((res) => {
            setColumns(res.data);
            console.log(res.data);
        })
    }

    //表格
    const columns = [
        {
            title: 'ID',
            dataIndex: "health_id",
            key: "health_id",
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age1',
        },
        {
            title: '健康得分',
            dataIndex: 'score',
            key: 'score',
        },
        {
            title: '表现',
            dataIndex: 'performance',
            key: 'performance',
        },
        {
            title: '最后更新时间',
            dataIndex: 'modifyTime',
            key: 'modifyTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle" >
                    <ModalTable content={record} />
                    <ModalTableHEdit content={record} fn={fn} />
                    <ModalTableHTime content={record} />
                </Space>
            ),
        },
    ];

    return (

        <div id="heathBox">
            {/* <div>健康数据</div> */}
            <p>健康数据</p>
            <div className="Breadcrumb">
                <Breadcrumb>
                    {/* <Breadcrumb.Item>健康管理</Breadcrumb.Item> */}
                    <Breadcrumb.Item>
                        <a href="">健康管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">健康数据</a>
                    </Breadcrumb.Item>
                    {/* <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
                </Breadcrumb>
            </div>
            <div className="h1_shuru">
                <Form onSubmit={handleSubmit}>
                    <div>
                        <span className="h1_shuru_ss">时间</span>
                        {/* <Space direction="vertical" size={12}>
                            <RangePicker onChange={onChangeT} className="h1_shuru_c1_time" />
                        </Space> */}
                        <Space direction="vertical" size={12}>
                            <RangePicker
                                className="h1_shuru_c1_time"
                                showTime={{ format: 'HH:mm' }}
                                format="YYYY-MM-DD HH:mm"
                                onChange={onChangeT}
                                onOk={onOk}
                            />
                        </Space>
                    </div>
                    <div>
                        <span className="h1_shuru_s">姓名</span>
                        <Input onChange={onChangeN} value={userName} className="h1_shuru_c1" placeholder="请输入姓名" />
                    </div>
                    <div>
                        <span className="h1_shuru_s">ID</span>
                        <Input onChange={onChangeI} value={health_id} className="h1_shuru_c1" placeholder="请输入ID " />
                    </div>
                    <div>
                        <span className="h1_shuru_s">得分</span>
                        <Input onChange={onChangeSl} className="h1_shuru_c2" placeholder="分数 " />
                        <span className="h1_shuru_s1">至</span>
                        <Input onChange={onChangeSh} className="h1_shuru_c2 h1_shuru_c2_c" placeholder="分数 " />
                    </div>
                    <div>
                        <span className="h1_shuru_s">表现</span>
                        <Select className="h1_shuru_c3" onChange={handleChange} defaultValue="请选择" allowClear>
                            <Select.Option value="极差">极差</Select.Option>
                            <Select.Option value="差">差</Select.Option>
                            <Select.Option value="一般">一般</Select.Option>
                            <Select.Option value="良好">良好</Select.Option>
                            <Select.Option value="优秀">优秀</Select.Option>
                        </Select>
                    </div>
                    <div>
                        <Button onClick={handleSubmit} size="small" className="h1_shuru_c4" type="primary">筛选</Button>
                    </div>
                </Form>
            </div>
            <Table
                rowKey="health_id"
                columns={columns}
                dataSource={columnsdata}
                // pagination={{pageSize:5}} 
                pagination={false}
            />
            <div className="Pagination">
                <Pagination
                    onChange={paging}
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共${total}`}
                />
            </div>
        </div>
    )
}
export default HealthData